<template>
    <div class="task-my-issue-details">
        <div class="details-dept-container">
            <div class="details-dept" v-for="(sitem, sindex) in task.deptList" @click="changeDept(sitem, sindex)" :key="`panel-content-${sindex}`">
                {{sitem.deptName}}
                <div class="task-my-issue-details-guide" :style="getColor(dindex == sindex)" ></div>
            </div>
        </div>
        <div class="details-group-container" v-if="dindex > -1">
            <div class="details-group" v-for="(titem, tindex) in dept.groupList" @click="changeGroup(titem, tindex)" :key="`panel-content-group-${tindex}`">
                {{titem.groupName}}
                <div class="task-my-issue-details-guide" :style="getColor(gindex == tindex)" ></div>
            </div>
        </div>
        <div class="details-stu-container" v-if="gindex > -1">
            <div class="details-stu" v-for="(xitem, xindex) in group.studentList" @click="open(xitem)" :key="`panel-content-student-${xindex}`">
                <div class="xitem-name"> {{xitem.name}} </div>
                <div class="xitem-status"> {{xitem.flag === 1 ? "已提交" : "未提交"}} </div>
            </div>
        </div>
        <Modal
            v-model="display"
            title="提交详情">
            {{context}}
            <Image_Loader :editMode="false" :iList="imgs" />
        </Modal>
    </div>
</template>

<script>

import Image_Loader from "@iload/vue";
import task_request from "@/axios/task"

export default {
    data() {
        return {
            display: false,
            context: "",
            imgs: [],
            dept: {},
            group: {},
            dindex: -1,
            gindex: -1
        }
    },
    props: {
        task: {
            type: Object,
            default: () => {
                return {
                    deptList: []
                };
            }
        }
    },
    methods: {
        changeDept(v, w) {
            this.dept = v;
            this.dindex = w;
        },
        async changeGroup(v, w) {
            this.group = v;
            this.gindex = w;
            if (this.group.studentList == null)
                this.group.studentList = await task_request.getCommited(this.task.uid, this.dept.deptName, this.group.groupName);
        },
        getColor(v) {
            if (v) {
                return {
                    background: "rgb(0, 132, 255)"
                }
            }
        },
        open(v) {
            this.context = v.context;
            this.imgs = v.imgs;
            this.display = v.flag === 1;
        }
    },
    components: {
        Image_Loader
    }
}
</script>

<style lang="scss">
@import "@task/scss/record-details.scss";
</style>